<template>
  <view class="Global">
    <!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
    <bgImage></bgImage>
    <MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>

    <!-- 搜索栏 -->
    <!-- <view class="searchContentOut">
      <view class="searchContent">
        <input type="text" value="111" class="searchInput" />
        <view class="searchBg">
          <image src="../../../static/gongzuotai/sousuo@2x.png" class="searchImg" mode=""></image>
        </view>
      </view>
    </view> -->
    <searchInput :inputcontent="inputcontent" @sendData="getInputValue"></searchInput>





    <!-- 筛选栏 -->
    <view class="searchPickerContent" id="main">

      <view class="searchPickerContentBg">
<!--        <text class="searchPickerText">请选择日期</text>-->
<!--        <image class="searchPickerImg" src="../../../static/gongzuotai/xia_jiantou@2x.png" mode=""></image>-->
        <picker mode="date" :value="queryData.createTimeStart" :start="startDate" :end="endDate" @change="bindDateChange">
          <view class="searchPickerText" v-if="queryData.createTimeStart==''">选择开始时间</view>
          <view class="searchPickerText" v-else>{{queryData.createTimeStart}}</view>
        </picker>
      </view>

      <view class="searchPickerContentBg">
<!--        <text class="searchPickerText">2030-02</text>-->
<!--        <image class="searchPickerImg" src="../../../static/gongzuotai/xia_jiantou@2x.png" mode=""></image>-->
        <picker mode="date" :value="queryData.createTimeEnd" :start="startDate" :end="endDate" @change="bindEndDateChange">
          <view class="searchPickerText" v-if="queryData.createTimeEnd==''">选择结束时间</view>
          <view class="searchPickerText" v-else>{{queryData.createTimeEnd}}</view>
        </picker>
      </view>

    </view>




    <!-- 列表数据 -->
    <scroll-view scroll-y="true" class="listDataOut" :style="'height:'+scrollViewHeight+'px'">
      <view class="contentListOutInner">

        <view @click="OperationClickOpen(item)" class="listDataInner" v-for="(item,index) in listData">

          <view class="listDataInnerTop">
            <view class="listDataInnerTopLeft">
              <image class="listDataInnerTopLeftImg" v-if="item.styleImgs!=''" :src="apiUrl+item.styleImgs" mode=""></image>
              <image class="listDataInnerTopLeftImg" v-else src="/static/cuttingorder/cloth.png" mode=""></image>
            </view>
            <view class="listDataInnerTopRight">
              <text class="listDataInnerTopRightText">订单编号：{{item.orderCode}}</text>
              <text class="listDataInnerTopRightText">款式：{{item.styleName}}</text>
              <text class="listDataInnerTopRightText">日期：{{item.createTime}}</text>
              <text class="listDataInnerTopRightText" v-if="item.status=='0'">状态：未生产</text>
              <text class="listDataInnerTopRightText" v-if="item.status=='1'">状态：生产中</text>
              <text class="listDataInnerTopRightText" v-if="item.status=='2'">状态：生产完成</text>
            </view>

            <view class="listDataInnerTopRightImgBg">
              <image class="listDataInnerTopRightImg" src="../../../static/gongzuotai/shanchu-red@2x.png" @click="deleteOrder(item.id)"
                     mode="">
              </image>
            </view>

          </view>


          <view class="progress-box_out">

            <progress class="progress-box_progress" :percent="item.percent" activeColor="#0081FF"
                      backgroundColor="#ECF5FD" stroke-width="4" active='true' />
            <text class="progress-box_text">完成度 </text>
            <text class="progress-box_text1">{{item.percent}}%</text>
          </view>

        </view>

      </view>


    </scroll-view>



    <view class="loginContent" id="mainBottom">

      <button @click="createOrder()" style="color:#ffffff" class="login" type="default">{{login}}</button>
      <button @click="createBatchOrder()" style="color:#ffffff" class="batchOrder" type="default">{{batchTitle}}</button>
    </view>

    <!--底部操作按键 点击列表弹出 start-->
    <uni-popup ref="popupBottom" type="bottom">
      <view class="bagDetail">

        <view class="baseList" v-for="(item,index) in sizeListDataBottom" @click="OperationClickBottom(item)">
          <view class="baseListItem">
            <text class="baseListItemText" v-if="item.title!=='开始生产'">{{item.title}}</text>
            <text class="baseListItemText" v-if="item.title=='开始生产' && listItemData.status=='0'">{{item.title}}</text>
            <text class="baseListItemText" v-if="item.title=='开始生产' && listItemData.status=='1'">生产完成</text>
          </view>
          <view class="line" v-if="index!=5"></view>

          <view class="line_1" v-if="index==5"></view>
        </view>

      </view>
    </uni-popup>
    <!--底部操作按键 点击列表弹出 end-->



  </view>
</template>

<script>
import MyNav from '@/components/customnavbar.vue'
import bgImage from '@/components/backgroundImage.vue'
import searchInput from '@/components/searchInput.vue'
import {orderPage,updateOrder,deleteOrder} from "@/pages/api/api";
import config from "@/pages/api/config";

export default {
  components: {
    MyNav,
    bgImage,
    searchInput
  },
  data() {
    return {
      apiUrl: config.apiUrl,
      inputcontent: '款号',
      login: '新建订单',
      batchTitle: '批量新建订单',
      title: '裁床订单',
      isback: true,
      listData: [],
      listItemData: {},
      mainTop: '',
      bottomTop: '',
      scrollViewHeight: 0,
      // 底部操作按键列表
      sizeListDataBottom: [{
        title: '复制'
      },
	    {
	      title: '编辑修改'
	    },
        {
          title: '订单详情'
        },
        {
          title: '工序工价'
        },
        {
          title: '开始生产'
        },
        {
          title: '发物料卡'
        },
        {
          title: '删除'
        }
      ],
      queryData: {
        styleName: '',
        storeId: '',
        tenantId: '',
        createTimeStart: '',
        createTimeEnd: '',
      },
    }
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  onReady() {
    // 获取距离顶部的距离
    let query = uni.createSelectorQuery().in(this);
    query.select('#main').boundingClientRect(data => {
      // console.log(data);
      this.mainTop = data.top

      // console.log('1底部距离', this.mainTop);

      // 在其他页面或组件中访问
      // const app = getApp();
      // this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
      // 	.totalHeight
      /* console.log('获取距离',this.mainTop,this.scrollViewHeight);
      console.log('滚动距离',this.scrollViewHeight); */
    }).exec();

    query.select('#mainBottom').boundingClientRect(data => {
      this.bottomTop = data.top
      // console.log('2底部距离', this.bottomTop);

      this.scrollViewHeight = this.bottomTop - this.mainTop
      // console.log('可滚动距离', this.scrollViewHeight);
    }).exec();
  },
  onLoad(){
    const app = getApp();
    this.queryData.storeId = app.globalData.storeId
    this.queryData.tenantId = app.globalData.tenantId
    this.loadData()
  },
  methods: {
    loadData(){
      orderPage(this.queryData).then(res=>{
        if(res.code==200){
          this.listData = res.rows;
        }
      })
    },
    bindDateChange: function(e) {
      this.queryData.createTimeStart = e.detail.value
    },
    bindEndDateChange: function(e) {
      this.queryData.createTimeEnd= e.detail.value
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        month = month + 1;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    // 获取输入框的值
    getInputValue(e) {
      console.log('获取输入框的值', e);
      this.queryData.styleName = e
      this.loadData()
    },
    OperationClickOpen(item) {

      this.openBottom(item)

    },
    // 打开弹框
    openBottom(e) {
      console.log('点了');
      this.$refs.popupBottom.open('bottom')
      console.log('列表点击事件', e);
      this.listItemData = e


    },
    // 关闭尺码弹框
    closeBottom() {
      this.$refs.popupBottom.close()
    },
    // 点击 底部 操作按键
    OperationClickBottom(e) {

      switch (e.title) {
        case '编辑修改':
          this.listItemData.type = 'update'
          console.log('编辑修改',JSON.stringify(this.listItemData))
          uni.navigateTo({
            // url: '/subPackA/cuttingOrder/cuttingOrderEdit/updateNewOrder?item='+encodeURIComponent(JSON.stringify(this.listItemData)),
            url: '/subPackA/cuttingOrder/batchBundling/batchBundling?item='+encodeURIComponent(JSON.stringify(this.listItemData)),
            success: res => {},
            fail: () => {},
            complete: () => {}
          });
          break;

        case '订单详情':
          uni.navigateTo({
            url: '/subPackA/cuttingOrder/cuttingOrderDetail/cuttingOrderDetail?item='+encodeURIComponent(JSON.stringify(this.listItemData)),
            success: res => {},
            fail: () => {},
            complete: () => {}
          });
          break;
        case '取消':
          this.closeBottom()
          break;
        case '复制':
          this.listItemData.type = 'copy'
          console.log('复制',JSON.stringify(this.listItemData))
          uni.navigateTo({
            url: '/subPackA/cuttingOrder/batchBundling/batchBundling?item='+encodeURIComponent(JSON.stringify(this.listItemData)),
            success: res => {},
            fail: () => {},
            complete: () => {}
          });
          break;
        case '工序工价':
          console.log('工序工价',JSON.stringify(this.listItemData))
          uni.navigateTo({
            url: '/subPackA/cuttingOrder/process/orderProcess?item='+encodeURIComponent(JSON.stringify(this.listItemData)),
            success: res => {},
            fail: () => {},
            complete: () => {}
          });
          break;
        case '开始生产':
          let data = {
            id: this.listItemData.id,
            status: '0'
          }
          if(this.listItemData.status=='0'){
            uni.showModal({
              title: '提示',
              content: '是否开始生产该订单',
              showCancel: true,
              success: (res) => {
                if (!res.confirm) {
                  return
                }
                data.status = '1'
                updateOrder(data).then(res=>{
                  if(res.code==200){
                    uni.showToast({
                      title: '开始生产该订单',
                      icon: 'none'
                    });
                  }else {
                    uni.showToast({
                      title: '修改失败！',
                      icon: 'error'
                    });
                  }
                })
              }
            })
          }
          if(this.listItemData.status=='1'){
            uni.showModal({
              title: '提示',
              content: '是否生产完成该订单',
              showCancel: true,
              success: (res) => {
                if (!res.confirm) {
                  return
                }
                data.status = '2'
                updateOrder(data).then(res=>{
                  if(res.code==200){
                    uni.showToast({
                      title: '生产完成该订单',
                      icon: 'none'
                    });
                  }else {
                    uni.showToast({
                      title: '修改失败！',
                      icon: 'error'
                    });
                  }
                })
              }
            })
          }
		      this.closeBottom()
		      break;
        case '发物料卡':
          this.listItemData.orderId = this.listItemData.id
          console.log('发物料卡',JSON.stringify(this.listItemData))
          uni.navigateTo({
            url: '/subPackA/cuttingOrder/printQRCode/printQRCode?item='+encodeURIComponent(JSON.stringify(this.listItemData)),
            success: res => {},
            fail: () => {},
            complete: () => {}
          });
          break;
        default:
          break;
      }
    },
    // 跳转详情
    DetailClick() {
      uni.navigateTo({
        url: '/pages/cuttingOrder/cuttingOrderDetail/cuttingOrderDetail',
        success: res => {},
        fail: () => {},
        complete: () => {}
      });
    },

    // 新建订单
    createOrder() {
      uni.showModal({
        title: '确定',
        content: '确定要新建吗？',
        showCancel: true,
        success: (res) => {
          uni.navigateTo({
            url: '/subPackA/cuttingOrder/createANewOrder/createANewOrder',
            success: res => {},
            fail: () => {},
            complete: () => {}
          });
        }
      })

    },
    //批量新建订单
    createBatchOrder() {
      console.log("createOrder")
      uni.showModal({
        title: '确定',
        content: '确定要新建吗？',
        showCancel: true,
        success: (res) => {
          uni.navigateTo({
            url: '/subPackA/cuttingOrder/batchBundling/batchBundling',
            success: res => {},
            fail: () => {},
            complete: () => {}
          });
        }
      })

    },
    deleteOrder(id){
      uni.showModal({
        title: '提示',
        content: '是否删除该订单',
        showCancel: true,
        success: (res) => {
          if (!res.confirm) {
            return
          }
          deleteOrder(id).then(res=>{
            if(res.code==200){
              uni.showToast({
                title: '删除成功！',
                icon: 'none'
              });
            }else {
              uni.showToast({
                title: '删除失败！',
                icon: 'error'
              });
            }
          })
        }
      })
    }
  }
}
</script>

<style>
.loginContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 750rpx;

  position: absolute;
  bottom: 10rpx;
  margin-top: 10rpx;
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
  width: 690rpx;
  height: 100rpx;
  background: linear-gradient(90deg, #45A8FF, #0AE1C6);
  border-radius: 20rpx;
  margin-bottom: 20rpx;


  font-weight: 400;
  font-size: 36rpx;
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;

  margin-top: 60rpx;
  background: linear-gradient(90deg, #45A8FF, #0AE1C6);

}
.batchOrder {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
  width: 690rpx;
  height: 100rpx;
  background: linear-gradient(90deg, #45A8FF, #0AE1C6);
  border-radius: 20rpx;
  margin-bottom: 20rpx;


  font-weight: 400;
  font-size: 36rpx;
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;

  /*margin-top: 60rpx;*/
  background: linear-gradient(90deg, #45A8FF, #0AE1C6);

}



.listDataInnerTopRightText {
  font-family: HarmonyOS Sans SC;
  font-weight: 600;
  font-size: 24rpx;
  color: #333333;
  line-height: 50rpx;
}


.listDataInnerTopRightImgBg {
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  top: 30rpx;
  right: 30rpx;
}

.listDataInnerTopRightImg {
  width: 50rpx;
  height: 50rpx;
  padding: 10rpx;

}

.listDataInnerTopRight {
  display: flex;
  flex-direction: column;
  align-items: left;


  margin-top: 30rpx;
}

.listDataInnerTopLeft {
  width: 190rpx;
  height: 190rpx;
  background: #ECF5FD;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  margin-right: 30rpx;
  margin-left: 30rpx;
  margin-top: 30rpx;
}

.listDataInnerTopLeftImg {
  width: 188rpx;
  height: 148rpx;

}

.progress-box_progress {
  display: flex;
  width: 380rpx;
  height: 10rpx;
  border-radius: 5rpx;
}

.progress-box_text {
  color: #666666;
  margin-left: 30rpx;
  font-size: 24rpx;
  font-weight: 600;
}

.progress-box_text1 {
  color: #0081FF;
  margin-left: 10rpx;
  font-size: 24rpx;
}

.progress-box {

  display: flex;
  flex-direction: row;

  display: flex;
  justify-conent: left;
  width: 380rpx;
  height: 6rpx;
  border-radius: 5rpx;

  /* background-color: #333333; */
}

.progress-box_out {
  margin-top: 30rpx;
  display: flex;
  flex-direction: row;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  border-radius: 5rpx;

  /* background-color: #333333; */
}


.listDataInnerTop {
  position: relative;
  display: flex;
  flex-direction: row;

  display: flex;
  justify-content: left;
  width: 100%;
  /* background: #0AE1C6; */


}

.listDataOut {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 750rpx;
  margin-top: 30rpx;
  height: 800rpx;

  margin-bottom: 20rpx;
}


.contentListOutInner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.listDataInner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;

  width: 690rpx;
  height: 295rpx;
  background: #FFFFFF;
  border-radius: 30rpx;


  margin-bottom: 30rpx;
}






.searchPickerText {

  margin-left: 20rpx;
  font-family: HarmonyOS Sans SC;
  font-weight: 600;
  font-size: 24rpx;
  color: #333333;

}

.searchPickerImg {
  width: 20rpx;
  height: 10rpx;
  margin-right: 20rpx;

}

.searchPickerContentBg {
  width: 330rpx;
  height: 60rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  margin-right: 15rpx;
  margin-left: 15rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;


}

.searchPickerContent {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  margin-top: 30rpx;




}





.searchImg {
  width: 36rpx;
  height: 36rpx;
}

.searchBg {
  width: 100rpx;
  height: 80rpx;
  background: linear-gradient(90deg, #45A8FF, #0AE1C6);
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.searchInput {

  width: 590rpx;
  height: 100%;
  font-family: HarmonyOS Sans SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #BBBBBB;
  line-height: 30rpx;
}

.searchContentOut {
  display: flex;
  justify-content: center;
}

.searchContent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 690rpx;
  height: 80rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin-top: 30rpx;




}

.imagepage {

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;

}
.line_1 {
  width: 100%;
  height: 16rpx;
  background: #F8F8F8;
}
.line {
  width: 100%;
  height: 1rpx;
  background-color: #EEEEEE;
  /* background: #EEEEEE; */
}
.baseListItemText_Red {
  font-size: 24rpx;
  color: red;
  line-height: 100rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}

.baseListItemText {

  font-size: 24rpx;
  color: #333333;
  line-height: 100rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}

.baseListItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100rpx;
  justify-content: center;

}


.baseList {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;

}
.bagDetail {
  width: 750rpx;
  height: 762rpx;
  background: #FFFFFF;
  border-radius: 55rpx 55rpx 0rpx 0rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
